<template>
  <div>
    <h1 @click="handleClick()">你好Vue3</h1>
    <p>{{ msg }}</p>
    <p>{{ reverseMsg }}</p>
    <input v-model="msg"/>
    <button @click="num++">{{ num }}</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup(){
    // 执行时间 = beforeCreate + created
    // 组合式API
    // 定义响应数据num 默认值是0
    const num = ref(0);
    return { num  }
  },
  // 定义组件的名称
  name: 'App',
  // 定义组件的属性
  data(){
    return {
      msg: 'Hello World'
    }
  },
  // 定义组件的方法
  methods:{
    handleClick(){
      console.log('点击了')
    }
  },
  // 定义组件的计算属性
  computed:{
    // 反转msg
    reverseMsg(){
      // 将msg字符串转换成数组，然后反转，最后再转换成字符串
      return this.msg.split('').reverse().join('')
    }
  }
  
}
</script>
<style>
  .active{
    color: #f70;
  }
</style>